<docs>
  ## 历史测评记录
</docs>
<template>
  <div class="result">
    <div class="header">
      <span class="arrow" @click="back_btn"></span>
      <h3 class="title">我的测评</h3>
    </div>
    <pagination-list
      @pullingDown="asyncFetch"
      :no-data="noData"
      class="search-result"
      :ajax-loading="ajaxLoading"
    >
      <div
        :class="item.disabled ? 'list weui-cells weui-cells_checkbox disabled':
      'list weui-cells weui-cells_checkbox'"
        v-for="(item,index) in list"
        :key="index"
      >
        <label class="weui-cell weui-check__label" :for="`abc${index}`">
          <div class="weui-cell__bd rwidth">
            <input
              type="checkbox"
              :disabled="item.disabled"
              class="weui-check"
              name="checkbox"
              :id="`abc${index}`"
              :value="item"
              v-model="selected"
            />
            <span class="weui-icon-checked"></span>
          </div>
          <div class="weui-cell__hd lwidth">
            <p class="res_name">
              本次测评维度为：
              <span hell="dss">{{item.cpwdmc}}</span>
            </p>
            <p class="data">{{item.djsj}}</p>
            <p class="res_pos">{{item.zf}}</p>
          </div>
        </label>
      </div>
    </pagination-list>
    <button
      class="btn-primary btn position"
      @click="goAnalysis"
      :disabled="selected.length === 0"
    >测评结果分析</button>
  </div>
</template>
<script>
import $ from "@/common/js/axios";
import { listTestMark } from "common/js/conf";
import PaginationList from "base/paginationList/paginationList";

export default {
  name: "testResult",
  components: { PaginationList },
  data() {
    return {
      ajaxLoading: false,
      noData: "",
      list: [],
      selected: [],
      form: {
        pageNum: 1,
        pageSize: "10"
      }
    };
  },
  watch: {
    // 动态设置禁用
    selected(selects) {
      /* eslint-disable no-param-reassign  */
      this.list.forEach(item => {
        item.disabled = false;
        selects.forEach(ele => {
          if (ele === item) return;
          const type = ele.cpwd;
          const typeSub = ele.wdzx;
          const flag =
            (type === "01" || type === "02") &&
            (item.cpwd === "03" || item.cpwd === type);
          const flagTwo =
            type === "03" &&
            (typeSub === item.wdzx || item.cpwd === "01" || item.cpwd === "02");
          if (flag || flagTwo) {
            item.disabled = true;
          }
        });
      });
    }
  },
  methods: {
    GET_results(page = 1) {
      this.$loading = true;
      this.ajaxLoading = true;
      this.form.pageNum = page;
      $.get("/grzycp/cpjgCx", { params: this.form })
        .then(res => {
          const data = res.returnData;
          // if (+data.executeResult === 1) {
          //   this.list = data.cpwdlb;
          //   this.list.forEach(item => {
          //     this.$set(item, "disabled", false);
          //   });
          // } else {
          //   this.noData = true;
          //   this.$alert("暂无历史测评结果");
          //   // .then(() => {
          //   //   this.$router.replace({ name: 'personUser' });
          //   // });
          // }
          if (+data.executeResult === 0) {
            this.noData = true;
            // this.list = [];
            if (page === 1) {
              this.list = [];
            }
            // this.$alert("暂无历史测评结果");
          } else {
            this.noData = false;
            // 有数据
            if (page === 1) {
              this.list = data.cpwdlb;
            } else {
              this.list = this.list.concat(data.cpwdlb);
            }
            this.list.forEach(item => {
              this.$set(item, "disabled", false);
            });
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
          this.$loading = false;
        });
    },
    // async fetach data
    asyncFetch(page) {
      this.GET_results(page);
    },
    // 跳转页面
    goAnalysis() {
      const cppcids = this.selected.map(item => item.cppcid).join();
      const cpwd = this.selected[0].cpwd;
      this.$router.push({
        path: "/test/matchAnalysis",
        query: { cppcids, cpwd }
      });
    },
    // 按钮点击
    back_btn() {
      this.$router.push({ name: "personUser" });
    }
  },
  created() {
    this.GET_results();
    this.$store.commit("SET_VISIBLE_HELP", true);
    this.$store.commit("SET_HELP_TITLE", listTestMark.title);
    this.$store.commit("SET_HELP_CONTENT", listTestMark.content);
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.result {
  padding-bottom: 100px;
  // /deep/ .noData {
  //   text-align: center;
  //   margin-top: 1rem;
  //   color: #ccc;
  // }
  // /deep/ .no-data {
  //   text-align: center;
  //   color: #ccc;
  //   margin-top: 0;
  // }
}
.list {
  margin: 0 auto 30px;
  transition: $transitionFast;
  &.disabled {
    background-color: $color-disabled;
  }
}
.lwidth {
  width: 85%;
}
.rwidth {
  width: 15%;
}
.res_name {
  font-size: $font-size-base;
  color: #000;
  line-height: 60px;
  span {
    color: $color-success;
  }
}
.data {
  position: absolute;
  bottom: 20px;
  left: 75%;
  font-size: $font-size-small;
  color: $color-text-primary;
}
.res_pos {
  font-size: $font-size-small;
  color: $color-text-primary;
}
.position {
  border-radius: 0;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 5;
}
</style>
